<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>巴塞罗那餐厅 - 城市生活模拟器</title>
    <link rel="stylesheet" href="restaurant_style.css">
</head>
<body>
    <!-- 顶部状态栏 -->
    <div class="status-bar">
        <div class="user-info">
            <div class="avatar">
                <img src="" alt="用户头像">
            </div>
            <span class="username">旅行者</span>
        </div>
        <div class="game-stats">
            <div class="coin">
                <span class="coin-icon">💰</span>
                <span>1280</span>
            </div>
        </div>
    </div>

    <!-- 游戏场景 -->
    <div class="game-scene">
        <div class="restaurant-bg"></div>
        
        <!-- 词汇收集系统 -->
        <div class="vocabulary-badge">
            <span class="vocabulary-icon">📚</span>
            <span>已收集: 12</span>
        </div>
        
        <!-- NPC角色 -->
        <div class="npc npc-waiter" id="waiter">
            <div class="npc-icon">👨‍🍳</div>
            <div class="npc-name">服务员</div>
        </div>
        
        <div class="npc npc-chef" id="chef">
            <div class="npc-icon">👩‍🍳</div>
            <div class="npc-name">厨师</div>
        </div>
        
        <div class="npc npc-customer" id="customer">
            <div class="npc-icon">🧑</div>
            <div class="npc-name">顾客</div>
        </div>
        
        <!-- 玩家角色 -->
        <div class="player">
            <div class="player-icon">🧍</div>
        </div>
        
        <!-- 交互提示 -->
        <div class="interaction-hint">点击NPC开始对话</div>
    </div>

    <!-- 对话框 -->
    <div class="dialog-container" id="dialogContainer">
        <div class="dialog-header">
            <div class="dialog-avatar">👨‍🍳</div>
            <div class="dialog-name">Antonio</div>
            <div class="dialog-close" id="closeDialog">✕</div>
        </div>
        <div class="dialog-content">
            Welcome to Barcelona Restaurant! How may I help you today?
        </div>
        <div class="dialog-options">
            <div class="dialog-option">I'd like to see the menu, please.</div>
            <div class="dialog-option">What's today's special?</div>
            <div class="dialog-option">Tell me about Spanish cuisine.</div>
        </div>
    </div>

    <!-- 菜单面板 -->
    <div class="menu-panel" id="menuPanel">
        <div class="menu-header">
            <div class="menu-title">餐厅菜单</div>
            <div class="menu-close" id="closeMenu">✕</div>
        </div>
        <div class="menu-content">
            <div class="menu-category">
                <div class="category-title">前菜</div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">西班牙火腿</div>
                        <div class="item-desc">Jamón Ibérico - 伊比利亚火腿，西班牙特产</div>
                    </div>
                    <div class="item-price">€12</div>
                </div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">西班牙橄榄</div>
                        <div class="item-desc">Aceitunas - 腌制橄榄配面包</div>
                    </div>
                    <div class="item-price">€8</div>
                </div>
            </div>
            
            <div class="menu-category">
                <div class="category-title">主菜</div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">海鲜饭</div>
                        <div class="item-desc">Paella de Marisco - 传统西班牙海鲜饭</div>
                    </div>
                    <div class="item-price">€22</div>
                </div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">西班牙炖牛尾</div>
                        <div class="item-desc">Rabo de Toro - 慢炖牛尾，配红酒汁</div>
                    </div>
                    <div class="item-price">€18</div>
                </div>
            </div>
            
            <div class="menu-category">
                <div class="category-title">饮品</div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">桑格利亚酒</div>
                        <div class="item-desc">Sangria - 传统西班牙水果酒</div>
                    </div>
                    <div class="item-price">€7</div>
                </div>
                <div class="menu-item">
                    <div class="item-info">
                        <div class="item-name">西班牙咖啡</div>
                        <div class="item-desc">Café Español - 加入白兰地的特色咖啡</div>
                    </div>
                    <div class="item-price">€5</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active">
            <div class="tab-icon">🏙️</div>
            <div>场景</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon">🎒</div>
            <div>背包</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon">📝</div>
            <div>任务</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon">⚙️</div>
            <div>设置</div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <script src="restaurant_script.js"></script>
</body>
</html>